<template>
  <div class="trade-notice-page">
    <Back-top></Back-top>
    <div class="nav-holder">
      <div class="nav-box flex-row-v-center">
        <div class="logo-box flex-center">天涯明月刀</div>
        <ul class="switch-box flex-row-v-center">
          <li class="item">
            <nuxt-link to="/">首页</nuxt-link>
          </li>
          <li class="item">
            <nuxt-link to="/account-on-sale">在售账号</nuxt-link>
          </li>
          <li class="item">
            <nuxt-link to="/found-pay">我要卖号</nuxt-link>
          </li>
          <li class="item">
            <nuxt-link to="/verification">验证客服</nuxt-link>
          </li>
          <li class="item active">
            交易须知
          </li>
          <li class="item">
            <nuxt-link to="/business">业务介绍</nuxt-link>
          </li>
          <li class="item">
            <nuxt-link to="/blacklist">黑号查询</nuxt-link>
          </li>
          <li class="item" @click="goToOtherGame">
            其他游戏
          </li>
        </ul>
      </div>
    </div>
    <div class="breadcrumb-holder flex-row-v-center">
      <div class="item">首页</div>
      <img class="arrow" src="~assets/img/icon-right-arrow.png"/>
      <div class="item active">交易须知</div>
    </div>
    <div class="sec-01 flex-row">
      <div class="main-holder flex-1">
        <div class="title">交易规则</div>
        <div class="item-box">
          <span class="tag">违约判定</span>
          <div class="content">
            <p>1. 买卖双方确认交易进入讨论组后，因个人原因取消交易需要支付此号双倍成交代售费补偿其他两方</p>
            <p>2. 双方同意【预定】账号进入讨论组后，任意方反悔取消交易需赔偿定金相同金额给另两方，各获赔50%</p>
            <p>3. 分期购买账号，买家在分期中途想取消交易或不按时付尾款超过五天的，卖家有权收回账号且已付款不退，卖家强制取消交易的按找回诈骗算</p>
            <p>4. 交易前有任何疑问请提前询问代售，进入讨论组及视为认同代售的交易规则</p>
          </div>
        </div>
        <div class="item-box">
          <span class="tag">买家须知</span>
          <div class="content">
            <p>1. 想提前预定账号需要提前支付号价10%金额的定金，具体交易时间买卖双方决定，不接受口头预留</p>
            <p>2. 挂售账号截图里的流通金、点券、道具因日常消耗等会发生变化，均不作为账号详细参考，标题文字工作量大，可能有误差，请老板以截图为准</p>
            <p>3. 代售君会尽力避免找回事件发生，若购买了包赔服务，发生卖家找回帮助买家查询其家庭信息，联系长辈协助追回，追回无果代售提供卖家详细身份资料协助报警处理并进行补偿</p>
            <p>【官网代售】账号追回无果补偿号价100%</p>
            <p>条件：只要账号购买后没转手，都无条件补偿，若买家谎称账号被找回或隐瞒账号已转手，按诈骗处理</p>
          </div>
        </div>
        <div class="item-box">
          <span class="tag">卖家须知</span>
          <div class="content">
            <p>1. 想提前预定账号需要提前支付号价10%金额的定金，具体交易时间买卖双方决定，不接受口头预留</p>
            <p>2. 挂售账号截图里的流通金、点券、道具因日常消耗等会发生变化，均不作为账号详细参考，标题文字工作量大，可能有误差，请老板以截图为准</p>
            <p>3. 代售君会尽力避免找回事件发生，若购买了包赔服务，发生卖家找回帮助买家查询其家庭信息，联系长辈协助追回，追回无果代售提供卖家详细身份资料协助报警处理并进行补偿</p>
            <p>【官网代售】账号追回无果补偿号价100%</p>
            <p>条件：只要账号购买后没转手，都无条件补偿，若买家谎称账号被找回或隐瞒账号已转手，按诈骗处理</p>
          </div>
        </div>
      </div>
      <div class="aside-holder">
        <div class="title">交易流程</div>
        <div class="item-box">
          <span class="tag" :class="{'active': dealSelect == 0}" @click="switchDealProcess">买号流程</span>
          <span class="tag" :class="{'active': dealSelect == 1}" @click="switchDealProcess">卖号流程</span>
        </div>
        <div class="content">
          <div class="item flex-row" v-for="item in dealProcessList" :key="item.id">
            <div class="num flex-center">{{item.id}}</div>
            <div class="right flex-1">
              <div class="title">{{item.title}}</div>
              <div class="info">{{item.info}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dealSelect: 0,
      dealBuyProcessList: [{
        id: 1,
        title: '联系客服下单',
        info: '联系客服QQ，确认支付下单'
      }, {
        id: 2,
        title: '上号验证信息',
        info: '买家进讨论组上号验证信息是否正确完整'
      }, {
        id: 3,
        title: '修改资料',
        info: '确认后修改号主账号资料信息'
      }, {
        id: 4,
        title: '资料审核',
        info: '官方将在24小时内完成审核'
      }, {
        id: 5,
        title: '资料备案',
        info: '资料审核成功后，进行资料收集备案'
      }, {
        id: 5,
        title: '交易完成',
        info: '交易完成，给号主放款'
      }],
      dealSaleProcessList: [{
        id: 1,
        title: '上号截图',
        info: '联系客服QQ，提供上号截图和详情'
      }, {
        id: 2,
        title: '官网发布',
        info: '官方后台人员进行编辑发布，挂牌到官网'
      }, {
        id: 3,
        title: '寻找买家',
        info: '超多买家浏览官网，成功匹配'
      }, {
        id: 4,
        title: '担保交易',
        info: '专业交易客服帮助完成交易'
      }],
      dealProcessList: []
    }
  },
  mounted() {
    this.dealSelect = 0;
    this.dealProcessList = this.dealBuyProcessList
  },
  methods: {
    switchDealProcess() {
      this.dealSelect = this.dealSelect > 0 ? 0 : 1
      if (this.dealSelect <= 0) {
        this.dealProcessList = this.dealBuyProcessList
      } else {
        this.dealProcessList = this.dealSaleProcessList
      }
    },
    goToOtherGame() {
      window.open('http://localhost:3000', '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.trade-notice-page {
  background: rgb(245, 245, 245);

  .nav-holder {
    width: 100%;
    height: 60px;
    background: #393632;

    .nav-box {
      width: 1200px;
      height: 100%;
      margin: auto;

      .logo-box {
        width: 160px;
        height: 100%;
        background-image: linear-gradient(270deg, #FBBF02 0%, #F58A01 100%);
        font-weight: 600;
        font-size: 20px;
        color: #FFFFFF;
        cursor: pointer;
      }

      .switch-box {
        padding-left: 60px;
        height: 100%;

        .item {
          margin-right: 50px;
          font-size: 16px;
          cursor: pointer;
          line-height: 56px;
          color: rgba(255, 255, 255, 0.6);

          a {
            color: rgba(255, 255, 255, 0.6);
          }

          &.active {
            border-bottom: 4px solid #F58B01;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);

            a {
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
            }
          }
        }
      }
    }
  }

  .breadcrumb-holder {
    width: 1200px;
    height: 62px;
    margin: auto;

    .item {
      font-weight: 500;
      font-size: 16px;
      color: #A6ACB3;
      cursor: pointer;

      &.active {
        color: #3A3D41;
      }
    }

    .arrow {
      margin: 0 10px;
      width: 16px;
      height: 16px;
    }
  }

  .sec-01 {
    width: 1200px;
    background: #ffffff;
    margin: auto;
    padding: 40px;

    .main-holder {
      padding-right: 50px;
      border-right: 1px solid #F3F3F5;

      .title {
        font-weight: 600;
        font-size: 20px;
        color: #3A3D41;
        line-height: 28px;
      }

      .item-box {
        margin-top: 20px;

        .tag {
          background: #F58B01;
          border-radius: 17px;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 20px;
          padding: 7px 16px;
        }

        .content {
          padding: 20px 0;

          p {
            font-size: 14px;
            color: #3A3D41;
            line-height: 26px;
          }
        }
      }
    }

    .aside-holder {
      padding-left: 50px;
      width: 370px;

      .title {
        font-weight: 600;
        font-size: 20px;
        color: #3A3D41;
        line-height: 28px;
      }

      .item-box {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 0;

        .tag {
          background: #F7F8F9;
          color: #7F8389;
          border-radius: 17px;
          font-size: 14px;
          line-height: 20px;
          padding: 7px 16px;
          margin-right: 14px;
          cursor: pointer;

          &.active {
            background: #F58B01;
            color: #FFFFFF;
          }
        }
      }

      .content {
        padding: 20px 0;

        .item {
          padding-bottom: 20px;

          &:last-child {
            padding-bottom: 0;
          }

          .num {
            width: 26px;
            height: 26px;
            background: url("~assets/img/icon-num-bg.png") center center;
            background-size: cover;
            font-weight: 600;
            font-size: 13px;
            color: #FFFFFF;
          }

          .right {
            margin-left: 15px;

            .title {
              font-weight: 600;
              font-size: 14px;
              color: #3A3D41;
              line-height: 26px;
            }

            .info {
              font-size: 13px;
              color: #7F8389;
              line-height: 18px;
            }
          }
        }
      }
    }
  }
}
</style>
